<!-- 违章账单 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" />
    <table-index :table="table" :rowKey="`id`" @loadData="loadData">
      <template #table-summary>
        <div class="table-info" v-if="staticObj">
          <div class="table-info-item">
            违章总收入：<text>{{ unitVal(staticObj.totalAmount, '元') }}</text>
          </div>
          <div class="table-info-item">
            账单总数：<text>{{ staticObj.totalCount || 0 }}</text>
          </div>
          <div class="table-info-item">
            应收金额：<text>{{ unitVal(staticObj.receiveAmount, '元') }}</text>
          </div>
          <div class="table-info-item">
            实收金额：<text>{{ unitVal(staticObj.payAmount, '元') }}</text>
          </div>
        </div>
      </template>
      <template #carmsg="{ record }">
        <div class="car-msg">
          <div class="car-msg-left">
            <div class="col-text col-lic"> {{ record.licenseNo || '-' }} </div>
            <div class="col-text"> {{ record.carModelName || '-' }} </div>
          </div>
        </div>
      </template>
      <template #orderCode="{ record }">
        <div
          ><span @click="toOrderDetail(record.eventType, record.orderId, record.orderCode)" v-if="record.orderCode" class="order-line">{{
            record.orderCode
          }}</span>
          <span v-else>-</span>
        </div>
        <div>交车人：{{ record.giveStaffName || '-' }}</div>
      </template>
      <template #undertaker="{ record }">
        <div>{{ record.staffName || '-' }}</div>
        <div>{{ record.staffPhone || '-' }}</div>
      </template>
    </table-index>
  </div>
</template>

<script setup name="ViolationBillList">
  import { unitVal } from '@/utils'
  import { reactive, computed, onMounted, ref } from 'vue'
  import { getViolationBillList, getViolationBillListStatic } from '@/api/finance/costConfirm.js'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { cloneDeep } from 'lodash-es'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()
  // dateTime Attrs
  const searchList = computed(() => {
    return [
      {
        label: '车牌号',
        prop: 'licenseNo',
        type: 'a-input',
      },
      {
        label: '账单门店',
        prop: 'siteIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'multiple_site_lease_list',
        },
      },
      {
        label: '业务单信息',
        prop: 'violationCode',
        type: 'a-input',
      },
      {
        label: '负责人',
        prop: 'staffIdList',
        type: 'remote-select',
        attrs: {
          multiple: true,
          type: 'store_staff_list_multiple',
        },
      },
      {
        label: '违章时间',
        prop: 'startTimeRange',
        type: 'i-range-picker',
        attrs: {
          showTime: true,
          timePickerProps: {
            defaultValue: ['00:00:00', '23:59:59'],
          },
        },
        change: (value = []) => {
          queryParam.eventTimeStart = value[0]
          queryParam.eventTimeEnd = value[1]
        },
      },
    ]
  })
  const defaultQueryParam = {
    // 违章时间
    startTimeRange: [],
  }
  // 定义 queryParam
  const queryParam = reactive({
    ...cloneDeep(defaultQueryParam),
  })
  // 待处理 - table 配置
  const table = useTable({
    tableHeight: '60vh',
    columns: [
      { title: '业务单信息', dataIndex: 'violantionCode', fixed: 'left' },
      { title: '车辆信息', dataIndex: 'aa', width: 320, slotName: 'carmsg' },
      { title: '关联单号', dataIndex: 'supplierName', slotName: 'orderCode', width: 220 },
      { title: '负责人', dataIndex: 'exportDate', width: 180, slotName: 'undertaker' },
      { title: '违章时间', dataIndex: 'eventTime', width: 180 },
      { title: '账单门店', dataIndex: 'siteName' },
      { title: '费用金额', unit: '元', dataIndex: 'totalAmount', width: 130 },
      { title: '待结金额', unit: '元', dataIndex: 'pendingAmount', width: 130 },
      { title: '当前状态', dataIndex: 'eventStatusStr', width: 130 },
      { title: '备注', dataIndex: 'remark', width: 320, ellipsis: true },
    ],
    operates: [
      {
        label: '详情',
        permission: 'svms:finance:bill:violation.view',
        method: (record) => {
          navigateTo('/violation/detail/' + record.id, `账单-${record.violantionCode}`)
        },
      },
    ],
    buttons: [],
  })
  const staticObj = ref({})
  // 列表接口调用
  // const loadData = useFetchTableDataApi(table, queryParam, getOperationsBillPageList)
  const loadData = (page) => {
    const fn = useFetchTableDataApi(table, queryParam, getViolationBillList)
    fn(page).then(() => {
      getStatic()
    })
  }
  const getStatic = async () => {
    var params = queryParam
    const { result } = await getViolationBillListStatic(params)
    staticObj.value = result
  }
  const toOrderDetail = (eventType, id, orderCode) => {
    if (eventType == 4) {
      navigateTo(`/short-order/detail/${id}`, `${orderCode}-短租详情`)
    } else if (eventType == 7) {
      navigateTo(`/long-order/detail/${id}`, `${orderCode}-长租详情`)
    }
  }
  onMounted(() => {
    loadData()
  })
</script>

<style lang="less" scoped>
  .table-info-item {
    display: inline-block;
    margin-right: 20px;
    text {
      color: #1890ff;
    }
  }
  .order-line {
    color: #165dff;
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
  }
</style>
